<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>工作经历</title>
	</head>
	<style type="text/css">
		.tit{
			margin-bottom: -10px;
		}
		#middle{
			width: auto;
			border-bottom: 2px solid #cccccc;
			border-top: 2px solid #cccccc;
			padding-bottom: 10px;
		}
		#add{
			margin-left: 1300px;
		}
	</style>
	
	<body>
		<h3 class="tit">工作经历</h3>
		<div id="total">
			<br />
			<div id="middle">
				<br />
				公司名称： <input type="text" />&nbsp;&nbsp;
				职位： <input type="text" />&nbsp;&nbsp;
				<a href="#" onclick="delClick()" >删除工作经历</a>
				<br />
				<br />
				<table>
					<th>
						<td>工作职责及工作内容描述：</td>
						<td><textarea rows="10" cols="80"></textarea></td>
					</th>
				</table>
			</div>
		</div>
		<div id="add">
			<a href="#" onclick="addClick()">添加工作经历</a>
		</div>
	</body>
	
	<script type="text/javascript">
		function addClick(){
			var addObj = document.getElementById('total');
			addObj.innerHTML +=  
				`<div id="total1">
					<br />
					<div id="middle">
						<br />
						公司名称： <input type="text" />&nbsp;&nbsp;
						职位： <input type="text" />&nbsp;&nbsp;
						<a href="" onclick="delClick()" >删除工作经历</a>
						<br />
						<br />
						<table>
							<th>
								<td>工作职责及工作内容描述：</td>
								<td><textarea rows="10" cols="80"></textarea></td>
							</th>
						</table>
					</div>
					
				</div>`
		}
		
		function delClick(){
			var delObj = document.getElementById('total');
			var as = document.getElementByTagName('a');
			for (var i=0;i<as.Length-1;i++) {
				as[i].onclick=function(){
					delObj.removeChild(this.parentNode);
				}
			}
		}
		
		
	</script>
	
</html>
